<template>
    <div>
      <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
    <el-row>

      <el-col :span="6"><div class="grid-content bg-purple">
        <el-image
          style="width: 268px;height: 200px"
          src="http://qhwykybp2.hd-bkt.clouddn.com/mpic2.jpgs"
          ></el-image>
      </div></el-col>
      <el-col :span="18"><div class="grid-content bg-purple-light">
        <font style="margin-left:50px;font-size: 20px">歌名:</font><br><br>
        <font style="margin-left:50px;font-size: 20px">歌手:</font><br><br>
        <font style="margin-left:50px;font-size: 20px">所属专辑:</font><br><br>
        <el-button type="primary">播放</el-button>
        <el-button>收藏</el-button>
        <el-button>分享</el-button>
        <el-button>下载</el-button>
        <el-button>评论</el-button>
        <br>
        {{'歌词部分'}}
      </div></el-col>
    </el-row>
      </el-main>

      <el-aside width="200px"></el-aside>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "xiangqing",
      data() {
        return {
          input: '',
          currentDate: new Date(),
          url:'static/logo2.png',
          circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        }
      }
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
/*  &:last-child {
     margin-bottom: 0;
   }*/
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #242424;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
  }
  .grid-content1 {
    border-radius: 4px;
    min-height: 50px;
    background-color: red;
  }
  .grid-content2 {
    border-radius: 4px;
    min-height: 80px;
    background-color: white;
  }
  .grid-content3 {
    border-radius: 4px;
    min-height: 80px;
    background-color: white;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
</style>
